<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block" style="margin-top:12px;">
        <div class="brokerageitem">
          <div class="content">
            <img class="image" :src="goodItem.goods_image">
            <div style="flex:1;">
              <div class="titlebar">
                <div class="title">{{goodItem.goods_name}}</div>
                <div class="price">￥{{goodItem.transaction_amount}}</div>
              </div>
              <div class="pricebar">
                <div style="flex:1">X{{goodItem.goods_number}}</div>
              </div>
              <div class="app-specs" v-if="goodItem.sku_name && goodItem.sku_name.length">规格:
                {{specsName(goodItem.sku_name)}}
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="left">申请数量</div>
            <div class="right">
              <div class="quantity">
                <div class="minus" v-if="number>1" @click="onMinus">-</div>
                <div class="num">{{number}}</div>
                <div class="plus" v-if="number<goodItem.goods_number" @click="onPlus">+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top:12px;" v-if="!typeItem">
        <div class="block" v-for="(item,index) in typeList" :key="index">
          <div class="listitem" @click="onTypeList(item)">
            <div class="text">{{item.name}}</div>
            <img class="right" src="@/assets/img/right.png">
          </div>
        </div>
      </div>

      <div style="margin-top:12px;" v-if="typeItem">
        <div class="block">
          <div class="listitem">
            <div class="text">申请原因</div>
            <div>
              <popup-picker :data="reasonlist" v-model="reasonItem" show-name
                            :display-format="(val, name) => { return `${reasonName(val)}` }"
                            :placeholder="'请选择'"></popup-picker>
            </div>
            <img class="right" src="@/assets/img/right.png">
          </div>
        </div>
        <div class="block">
          <div class="listitem">
            <div class="text">问题描述</div>
          </div>
          <div>
            <textarea class="textarea" v-model="reason_desc" placeholder="问题描述" @focusout="inputBlur"
                      @focusin="inputFocus"></textarea>
          </div>
          <div v-if="!isSuNing(item.seller_member_id)" style="background-color: #fff;">
            <div class="upimagebox">
              <div v-for="(item,index) in images" :key="index" class="upimage delete-img">
                <chimage class="image" :src="item.base64Url"></chimage>
                <span class="delete-icon" @click="onDeleteImg(index)">x</span>
              </div>
              <div class="upimage">
                <label class="addfile">
                  <input type="file" @change="onImageSelect" accept=".png,.jpg,jpeg">
                </label>
              </div>
            </div>
          </div>
        </div>

        <!--物流信息 不是苏宁产品与自营商品非退货才显示相关物流信息-->
        <template v-if="!isSuNing(item.seller_member_id)">
          <template v-if="(isZY(item.seller_member_id) && typeItem.type !== '2') || isJinDong(item.seller_member_id)">
            <!--        <div class="block" v-if="typeItem.return_way&&typeItem.return_way.length">
                      <div class="boxitem">
                        <div class="title">返件方式</div>
                        <div class="content">
                          <div
                            class="button"
                            v-for="(item,index) in typeItem.return_way"
                            :key="index"
                            :class="return_way_index==index?'active':''"
                            @click="onReturnWay(index)"
                          >{{item.name}}
                          </div>
                        </div>
                      </div>
                    </div>-->
            <!--取件-->
            <!--除自营以外的供应商才显示取件-->
            <template v-if="!isZY(item.seller_member_id)">
              <div class="block" v-if="typeItem.pick_way&&typeItem.pick_way.length">
                <div class="boxitem">
                  <div class="title">取件方式</div>
                  <div class="content">
                    <div
                      class="button"
                      v-for="(item,index) in typeItem.pick_way"
                      :key="index"
                      :class="pick_way_index==index?'active':''"
                      @click="onPickWay(index)"
                    >{{item.name}}
                    </div>
                  </div>
                </div>
              </div>

              <div class="block">
                <div class="boxitem">
                  <div class="title">取件地址</div>
                  <div class="content">
                    <div class="inputbox">
                      <div class="text">地区</div>
                      <areaSelect @change="onPickAddressChange" :value="pick_address">
                        <div v-if="picke_area_info" class="picker">
                          <span>{{picke_area_info}}</span>
                        </div>
                        <div v-else>请选择地址</div>
                      </areaSelect>
                    </div>
                    <div class="inputbox">
                      <div class="text">详细地址</div>
                      <input class="input" v-model="pick_address_info" placeholder="请输入详细地址" type="text"
                             @focusout="inputBlur" @focusin="inputFocus">
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <!--换货维修-->
            <!--             京东10：退货，20：换货，30：维修-->
            <!--             自营：2：退货，3：换货，4：维修-->
            <!--10为京东的退货  2为自营的退货状态-->
            <div class="block" v-if="typeItem.type==3||typeItem.type==4||typeItem.type==20||typeItem.type==30">
              <div class="boxitem">
                <div class="title">收货地址</div>
                <div class="content">
                  <div class="inputbox">
                    <div class="text">地区</div>
                    <areaSelect @change="onReturnAddressChange" :areavalue="return_address">
                      <div v-if="return_area_info" class="picker">
                        <span>{{return_area_info}}</span>
                      </div>
                      <div v-else>请选择地址</div>
                    </areaSelect>
                  </div>
                  <div class="inputbox">
                    <div class="text">详细地址</div>
                    <input
                      class="input"
                      v-model="return_address_info"
                      placeholder="请输入详细地址"
                      type="text"
                      @focusout="inputBlur"
                      @focusin="inputFocus"
                    >
                  </div>
                </div>
              </div>
            </div>
          </template>

          <div class="block">
            <div class="boxitem">
              <div class="title">联系方式</div>
              <div class="content">
                <div class="inputbox">
                  <div class="text">联系人</div>
                  <input class="input" v-model="customer_name" placeholder="请输入联系人" type="text" @focusout="inputBlur"
                         @focusin="inputFocus">
                </div>
                <div class="inputbox">
                  <div class="text">联系电话</div>
                  <input
                    class="input"
                    v-model="customer_mobile"
                    placeholder="请输入联系人手机号"
                    type="text"
                    maxlength="11"
                    @focusout="inputBlur"
                    @focusin="inputFocus"
                  >
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="block" style="margin-top: 32px">
          <button class="button" style="margin-botton:15px;" @click="onSubmit">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'
  import areaSelect from '@/components/areaSelect'
  import specs from '@/mixin/specs'

  export default {
    name: 'mallOrderAfterSaleApply',
    mixins: [specs],
    data () {
      return {
        xheader: {
          title: '售后'
        },
        item: '',
        typeList: [],
        typeItem: null,
        number: 1,
        customer_name: '',
        customer_mobile: '',
        reasonlist: [],
        reasonItem: [],
        reason_desc: '',
        pick_way_index: 0,
        pick_address: '',
        picke_area_info: '',
        pick_address_info: '',
        return_way_index: 0,
        return_address: [],
        return_area_info: '',
        return_address_info: '',
        images: [],

        upImagesUrl: []
      }
    },
    components: {
      areaSelect
    },
    created () {
      this.init()
    },
    computed: {
      reasonName () {
        return (val) => {
          let reasonlist = this.reasonlist[0]
          for (let i = 0; i < reasonlist.length; i++) {
            if (reasonlist[i].value == val[0]) {
              return reasonlist[i].name
            }
          }
        }
      }
    },
    methods: {
      init () {
        this.item = JSON.parse(this.$route.query.item)
        this.goodItem = JSON.parse(this.$route.query.goodItem)
        this.getType()
      },
      onMinus () {
        this.number = this.number - 1
      },
      onPlus () {
        this.number = this.number + 1
      },
      // 取件方式切换
      onPickWay (index) {
        this.pick_way_index = index
      },
      onReturnWay (index) {
        this.return_way_index = index
      },
      onPickAddressChange (address) {
        let info = ''
        address.map(item => {
          info += item.area
        })
        this.picke_area_info = info
        this.pick_address = address
      },
      onReturnAddressChange (address) {
        let info = ''
        address.map(item => {
          info += item.area
        })
        this.return_area_info = info
        this.return_address = address
      },

      onTypeList (typeItem) {
        let reasonlist = []

        typeItem.reason_list.map(item => {
          reasonlist.push({
            name: item.reason_info,
            value: item.reason_id
          })
        })
        this.reasonlist = [reasonlist]
        this.typeItem = typeItem
      },
      async onImageSelect (e) {
        if (this.images.length >= 8) {
          this.$vux.toast.text('最多只能上传八张图片')
          return
        }
        let files = e.target.files || e.dataTransfer.files
        if (files[0].size > 1024 * 1024 * 20) {
          this.$vux.alert.show({
            title: '提示',
            content: '图片大小不能超过20M'
          })
          return
        }
        let imageType = /^image\//
        if (!files.length) return
        if (!imageType.test(files[0].type)) {
          e.target.value = ''
          return
        }
        let reader = new FileReader()
        reader.onload = re => {
          this.images.push({
            file: files[0],
            base64Url: re.target.result
          })
          e.target.value = ''
        }
        this.$vux.loading.show({
          text: '上传中'
        })
        let resImage = await Me.MallOrderAfterApplyImageUpload([files[0]])
        this.$vux.loading.hide()
        if (resImage.code == 0) {
          this.upImagesUrl.push(resImage.data.filePath)
          reader.readAsDataURL(files[0])
        } else {
          this.$vux.loading.hide()
          this.$vux.alert.show({
            title: '提示',
            content: resImage.msg
          })
        }
      },

      // 删除图片
      onDeleteImg (index) {
        this.images.splice(index, 1)
        this.upImagesUrl.splice(index, 1)
      },

      async onSubmit () {
        let param = {
          order_sn: this.item.order_sn,
          sku_id: this.goodItem.goods_sku,
          number: this.number,
          type: this.typeItem.type,
          other_sku: this.goodItem.other_sku
        }
        if (!this.reasonItem.length) {
          this.$vux.alert.show({
            title: '提示',
            content: '请选择申请原因'
          })
          return
        } else {
          param.reason = this.reasonItem[0]
        }

        if (!this.reason_desc) {
          this.$vux.alert.show({
            title: '提示',
            content: '请填写问题描述'
          })
          return
        } else {
          param.reason_desc = this.reason_desc
        }

        // 不是苏宁的商品才填写
        if (!this.isSuNing(this.item.seller_member_id)) {
          // 非自营才需要此参数
          if (!this.isZY(this.item.seller_member_id)) {
            if (!this.pick_address) {
              this.$vux.alert.show({
                title: '提示',
                content: '请选择取件地址'
              })
              return
            } else {
              param.pick_address = {}
              if (!this.pick_address_info) {
                this.$vux.alert.show({
                  title: '提示',
                  content: '请填写取件详细地址'
                })
                return
              } else {
                param.pick_address.address = this.pick_address_info
              }
              if (this.pick_address[0]) {
                param.pick_address.province_id = this.pick_address[0].id
                param.pick_address.province_name = this.pick_address[0].area
              }
              if (this.pick_address[1]) {
                param.pick_address.city_id = this.pick_address[1].id
                param.pick_address.city_name = this.pick_address[1].area
              }
              if (this.pick_address[2]) {
                param.pick_address.area_id = this.pick_address[2].id
                param.pick_address.area_name = this.pick_address[2].area
              }
              if (this.pick_address[3]) {
                param.pick_address.street_id = this.pick_address[3].id
                param.pick_address.street_name = this.pick_address[3].area
              }
              param.pick_address = JSON.stringify(param.pick_address)
            }
          }

          if (this.typeItem.return_way.length) {
            param.return_way = this.typeItem.return_way[this.return_way_index].code
          }
          if (this.typeItem.pick_way.length) {
            param.pick_way = this.typeItem.pick_way[this.pick_way_index].code
          }

          if (param.type == 3 || param.type == 4 || param.type == 20 || param.type == 30) {
            if (!this.return_address.length) {
              this.$vux.alert.show({
                title: '提示',
                content: '请选择收货地址'
              })
              return
            } else {
              param.return_address = {}
              if (!this.return_address_info) {
                this.$vux.alert.show({
                  title: '提示',
                  content: '请填写收货详细地址'
                })
                return
              } else {
                param.return_address.address = this.return_address_info
              }
              if (this.return_address[0]) {
                param.return_address.province_id = this.return_address[0].id
                param.return_address.province_name = this.return_address[0].area
              }
              if (this.return_address[1]) {
                param.return_address.city_id = this.return_address[1].id
                param.return_address.city_name = this.return_address[1].area
              }
              if (this.return_address[2]) {
                param.return_address.area_id = this.return_address[2].id
                param.return_address.area_name = this.return_address[2].area
              }
              if (this.return_address[3]) {
                param.return_address.street_id = this.return_address[3].id
                param.return_address.street_name = this.return_address[3].area
              }
              param.return_address = JSON.stringify(param.return_address)
            }
          }

          if (!this.customer_name) {
            this.$vux.alert.show({
              title: '提示',
              content: '请填写联系人'
            })
            return
          } else {
            param.customer_name = this.customer_name
          }
          if (!this.customer_mobile) {
            this.$vux.alert.show({
              title: '提示',
              content: '请填写联系人手机'
            })
            return
          } else {
            param.customer_mobile = this.customer_mobile
          }

          /*         if (this.images.length) {
            let upimages = true
            let upImagesUrl = []
            let resImage
            // for (let i in this.images) {
            //   alert(JSON.stringify('单个图片' + JSON.stringify(this.images[i].file)))
            //   resImage = await Me.MallOrderAfterApplyImageUpload([
            //     this.images[i].file
            //   ])
            //   alert(JSON.stringify(resImage))
            //   if (resImage.code == 0) {
            //     upImagesUrl.push(resImage.data.filePath)
            //   } else {
            //     upimages = false
            //     break
            //   }
            // }
            let file = this.images.map((item) => {
              return item.file
            })
            resImage = await Me.MallOrderAfterApplyImageUpload(file)
            if (resImage.code == 0) {
              upImagesUrl.push(resImage.data.filePath)
              upimages = true
            } else {
              upimages = false
            }
            if (!upimages) {
              this.$vux.loading.hide()
              this.$vux.alert.show({
                title: '提示',
                content: '提交失败请稍后重试'
              })
              return
            }
            if (upImagesUrl.length) {
              upImagesUrl = upImagesUrl.join(',')

              param.pic_list = upImagesUrl
            }
          } */
        }

        if (this.upImagesUrl.length) {
          this.upImagesUrl = this.upImagesUrl.join(',')
          param.pic_list = this.upImagesUrl
        }

        this.$vux.loading.show({
          text: '请稍后'
        })

        //  if(this.images.length){

        //  }

        let res = await Me.MallOrderAfterApply(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '申请售后成功',
            onHide: () => {
              this.$router.back()
            }
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      },
      async getType () {
        let param = {
          order_sn: this.item.order_sn,
          sku_id: this.goodItem.goods_sku,
          other_sku: this.goodItem.other_sku
        }
        let res = await Me.getOrderAfterType(param)
        if (res.code == 0) {
          this.typeList = res.data
          //
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg,
            onHide: () => {
              this.$router.back()
            }
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .upimagebox {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-top: -12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;

    .upimage {
      padding-top: 12px;
      padding-left: 12px;

      .image {
        width: 64px;
        height: 64px;
        background-size: cover;
      }

      .addfile {
        width: 64px;
        height: 64px;
        display: block;
        background-image: url("../../../../../assets/img/add_image.png");
        background-position: center;
        background-repeat: no-repeat;

        input {
          visibility: hidden;
          display: none;
        }
      }
    }
  }

  .brokerageitem {
    background-color: #fff;
  }

  .brokerageitem .content {
    display: flex;
    flex-direction: row;
    padding: 12px 16px;
    border-top: 1px solid #fbf8f7;
    border-bottom: 1px solid #fbf8f7;
    align-items: center;
  }

  .brokerageitem .content .image {
    width: 90px;
    height: 90px;
    display: block;
    margin-right: 24px;
    background-color: #f5f5f5;
  }

  .brokerageitem .content .titlebar {
    display: flex;
    flex-direction: row;
  }

  .brokerageitem .content .title {
    flex: 1;
    font-size: 14px;
    color: #9f8d89;
    line-height: 20px;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .brokerageitem .content .pricebar {
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    color: #351009;
    line-height: 20px;
  }

  .brokerageitem .content .price {
    font-size: 14px;
    color: #b0290f;
  }

  .brokerageitem .footer {
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .brokerageitem .footer .left {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .right {
    display: flex;
    align-items: center;
  }

  .brokerageitem .quantity {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .brokerageitem .quantity .plus {
    display: block;
    width: 24px;
    height: 24px;
  }

  .brokerageitem .quantity .minus,
  .brokerageitem .quantity .plus {
    display: block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
  }

  .brokerageitem .quantity .num {
    display: block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    color: #ae2309;
    text-align: center;
  }

  .textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 10px;
    font-size: 12px;
    line-height: 18px;
    border: none;
    color: #351009;
  }

  .listitem {
    display: flex;
    flex-direction: row;
    padding: 10px 20px 10px 16px;
    background-color: #fff;
    align-items: center;
  }

  .listitem .icon {
    width: 28px;
    height: 28px;
    display: block;
    margin-right: 8px;
  }

  .listitem .text {
    flex: 1;
    font-size: 15px;
    color: #351009;
    line-height: 21px;
  }

  .listitem .right {
    margin-left: 8px;
    height: 20px;
    width: 20px;
    display: block;
  }

  .boxitem {
    background-color: #fff;
  }

  .boxitem .title {
    font-size: 15px;
    color: #351009;
    line-height: 21px;
    padding: 14px 24px;
  }

  .boxitem .content {
    padding: 14px 24px;
  }

  .boxitem .button {
    text-align: center;
    height: 28px;
    line-height: 28px;
    border: 1px solid #d4d4d4;
    font-size: 12px;
    padding: 0 10px;
    display: inline-block;
  }

  .boxitem .button.active {
    border: 1px solid #ae2309;
    color: #ae2309;
  }

  .inputbox {
    display: flex;
    align-items: center;
  }

  .inputbox .text {
    margin-right: 12px;
    font-size: 12px;
    color: #351009;
    width: 80px;
  }

  .inputbox .input {
    border: 1px solid #f1edec;
    padding: 0 12px;
    box-sizing: border-box;
    display: block;
    flex: 1;
    font-size: 12px;
    color: #351009;
    height: 33px;
    line-height: 33px;
  }

  .inputbox + .inputbox {
    margin-top: 12px;
  }

  // .formitem {
  //   background-color: #fff;
  //   display: flex;
  //   padding: 14px 24px;
  //   box-sizing: border-box;
  //   align-items: center;
  // }

  // .formitem .label {
  //   display: block;
  //   font-size: 15px;
  //   color: #9f8d89;
  //   line-height: 21px;
  //   width: 96px;
  // }

  // .formitem input,
  // .formitem picker,
  // .placeholder,
  // .formitem areaSelect {
  //   flex: 1;
  //   font-size: 15px;
  //   color: #9f8d89;
  //   line-height: 21px;
  // }

  // .formitem .picker {
  //   position: relative;
  //   font-size: 15px;
  //   color: #9f8d89;
  //   line-height: 21px;
  //   min-height: 21px;
  //   display: block;
  //   box-sizing: border-box;
  //   padding-right: 15px;
  // }

  // .formitem .picker:before {
  //   content: " ";
  //   display: inline-block;
  //   height: 6px;
  //   width: 6px;
  //   border-width: 2px 2px 0 0;
  //   border-color: #351009;
  //   border-style: solid;
  //   -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  //   transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  //   top: -2px;
  //   position: absolute;
  //   top: 50%;
  //   right: 0;
  //   margin-top: -4px;
  // }
  .delete-img {
    position: relative;

    .delete-icon {
      position: absolute;
      color: red;
      font-size: 19px;
      top: 0;
      right: 0;
      background: #fff;
      width: 18px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
